<template>
  <div class="rankin-list">
    <div v-if="!pcLoading">
      <page-list-layout>
        <template v-slot:one>
          <div class="header flex" :class="store.isFlag ? '' : 'flex-col'">
            <div class="h-40 w-40 p-1 border-1 yu-color-text mr-3">
              <img class="w-full h-full" :src="playlist?.playlist?.coverImgUrl" alt="">
            </div>
            <div>
              <h2 class="flex justify-between">
                <span>{{ playlist?.playlist?.name }}</span>
                <span class="i-mdi-format-list-bulleted" v-if="!store.isFlag" @click="getToplistShow"/>
              </h2>
              <span>
              <span>最近更新：</span>
              <span>{{ timestampToYMD(playlist?.playlist?.updateTime) }}</span>
            </span>
              <header-actions
                  :actionsData="playlist?.playlist"
                  :isDownload="false"
                  :isCollect="false"
              />
            </div>
          </div>
        </template>
        <template v-slot:two>
          <music-list
              :listPlaylistDetails="playlist?.playlist"
              :paginationPlaylist="playlist?.playlist?.tracks"
              :noShowPage="false"
          />
        </template>
        <template v-slot:three>
          <Review/>
        </template>
        <template v-slot:top>
          <ranking-list
              :playlist-id="playlist?.playlist?.id"
              :ranking-list="rankingList"
              @selectTopList="selectTopList"
          />
        </template>
      </page-list-layout>
    </div>
   <loading v-else/>
    <!-- 弹出层 -> 榜单列表 -->
    <van-popup v-model:show="topListShow" position="right" :style="{ height: '100%', width: '50%' }" >
      <div class="p-1">
        <ranking-list
            :playlist-id="playlist?.playlist?.id"
            :ranking-list="rankingList"
            @selectTopList="selectTopList"
        />
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import HeaderActions from '@/components/HeaderActions/index.vue'
import MusicList from '@/components/MusicList/index.vue'
import Review from '@/components/Review/index.vue'
import RankingList from './components/RankingList/index.vue'

import {timestampToYMD} from "@/utils/index";
import {useStore} from "@/store/index"
import {reactive, toRefs} from "vue"
import {useRoute} from "vue-router";

const store = useStore()
const route = useRoute()

const data = reactive({
  playlist: [], // 榜单歌曲数据
  rankingList: [], // 榜单信息
  topListShow: false, // 移动端榜单列表弹出层
  pcLoading: false // pc的loading
})
const {rankingList, playlist, topListShow, pcLoading} = toRefs(data)

// 获取榜单对应的歌曲
const getTopListInfo = async (id) => {
  // 获取榜单信息
  data.rankingList = await store.getTopList()
  // 判断是否route中是否携带id如果有就直接通过id请求数据，如果没有就，默认请求第一个榜单的歌曲数据
  if (id) {
    await getTopListMusic(id)
  } else {
    await getTopListMusic(data.rankingList[0].id)
  }
}
// 页面加载开启loading
data.pcLoading = true
// 获取榜单信息
getTopListInfo(route.params.id)

// 设置播放的是歌单下标
store.currentInfo.type = 1

// 获取榜单歌曲
const getTopListMusic = async (id) => {
  // 设置播放榜单的id
  store.currentInfo.id = id
  await store.getRankingListDetail(id).then(res => {
    data.pcLoading = false // 关闭loading
    data.playlist = res
    // console.log(res)
  })
  // 获取评论
  await store.getCommentPlaylist(id)
}

// 选择榜单展示歌曲
const selectTopList = (id) => {
  data.pcLoading = true // 开启loading
  getTopListMusic(id)
}

// 榜单列表弹出层
const getToplistShow = () => {
  data.topListShow = true
}
</script>
